<template>
    <el-menu :default-active="'/' + $route.path.split('/')[1]" :ellipsis="false" router mode="horizontal"
        background-color="transparent">
        <el-menu-item v-for="item in baseRoutes" :index="item.path" :key="item.path" @click="handleMenuClick">
            {{ item.meta?.name as string }}
        </el-menu-item>
    </el-menu>
</template>

<script setup lang="ts">
import router from '@/router';
import { useMenuStoreHook } from "@/store/module/menu"
import { MenuItemRegistered } from 'element-plus';
import {  onMounted } from 'vue';
import { useRoute } from 'vue-router';

// 获取路由表
const baseRoutes = router.options.routes.filter(v => v.path != '/' && v.meta?.show)

const route = useRoute()
onMounted(() => {
    const smgLists = route.path.split('/')
    useMenuStoreHook().setSideMenuList(`/${smgLists[1]}`);
})
// 处理菜单点击
const handleMenuClick = (info: MenuItemRegistered) => {
    useMenuStoreHook().setSideMenuList(info.index);
}

</script>

<style scoped lang="scss">
.el-menu {
    width: auto;
    background-color: transparent;
}
</style>